import React, {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useMemo,
  useRef,
  useState
} from 'react'
import {
  XFlow,
  CanvasContextMenu,
  FlowchartExtension,
  FlowchartCanvas,
  CanvasSnapline,
  CanvasNodePortTooltip,
  CanvasScaleToolbar,
  CanvasMiniMap,
  CanvasToolbar,
  IAppDestroy,
  IApplication
} from '@antv/xflow'

import type { IAppLoad, NsGraph } from '@antv/xflow'

import {
  useCmdConfig,
  useGraphHookConfig,
  useMenuConfig,
  useToolbarConfig
} from './config'

import { NodePanel, ScriptPanel, FormPanel } from './partials'
import { formatDataBeforeCommit, initGraph } from './utils'
import YAML from 'yaml'
import styles from './index.module.less'

interface FlowProps {
  data: NsGraph.IGraphData
  meta?: {
    flowId?: string
    [key: string]: any
  }
}

const WorkFlow: React.FC<FlowProps> = (props, ref) => {
  const { data, meta } = props
  console.log(meta, data)
  const cmdConfig = useCmdConfig()
  const graphHooksConfig = useGraphHookConfig()
  const menuConfig = useMenuConfig(props)
  const toolbarConfig = useToolbarConfig(props)
  const graphRef = useRef()
  const formPanelRef = useRef()
  const ScriptPanelRef = useRef()

  const openScriptDraw = script => {
    ScriptPanelRef.current.initDraw(script)
  }

  const onLoad: IAppLoad = async app => {
    console.log('onLoad')
    console.log(data)
    graphRef.current = app
    const graph = await app.getGraphInstance()

    graph.on('node:click', ({ node }) => {
      const nodeData: NsGraph.INodeConfig = node.getData()
      console.log('click', nodeData)

      formPanelRef.current.initDraw(nodeData)
    })

    // graph.on('blank:click', () => {
    //   formPanelRef.current.close()
    // })
    // 布局
    await initGraph(app, data)
  }

  // useEffect(() => {
  //   graphRef.current && initGraph(graphRef.current, data)
  //   return () => {
  //     console.log('dispose');
      
  //   }
  // }, [data])

  useImperativeHandle(ref, () => ({
    getGraphData: () => {
      return graphRef.current.getGraphData()
    }
  }))
  return (
    <XFlow
      meta={meta}
      onLoad={onLoad}
      hookConfig={graphHooksConfig}
      commandConfig={cmdConfig}
      className={styles['xflow-workspace']}
    >
      <FlowchartExtension />
      {/* <CanvasToolbar
        layout="horizontal"
        config={toolbarConfig}
        position={{ top: 0, left: 290, right: 0, height: 40 }}
      /> */}
      <FlowchartCanvas
        position={{
          top: 0,
          bottom: 0,
          left: 290,
          right: 0
        }}
      >
        {/** 工具栏 */}
        <CanvasScaleToolbar className='vertical-tooltar' position={{ top: 5, left: 10 }} />
        {/** 小地图  */}
        <CanvasMiniMap minimapOptions={{ width: 200, height: 120 }} />
        <CanvasContextMenu config={menuConfig} />
        <CanvasSnapline />
        <CanvasNodePortTooltip />
      </FlowchartCanvas>
      <NodePanel position={{ top: 0, bottom: 0, left: 0, width: 290 }} />
      <FormPanel ref={formPanelRef} />
      <ScriptPanel ref={ScriptPanelRef} />
    </XFlow>
  )
}
export default forwardRef(WorkFlow)
